import React, { useMemo } from "react"
import { accountType, fixedIncomeType } from "@/types";
import { View, Text } from "@tarojs/components";
import OperateList from "@/components/operateList";
import { MoneyFormat } from "@/utils/format";
import { cycleList } from "@/dict";
import categorys from "@/store/categorys";
import { observer } from "mobx-react";
import moment from "moment";
import user from "@/store/user";
import "./index.scss"

const FixedIncome: React.FC<{
    fixedIncomes?: fixedIncomeType[],
    accountData?: accountType,
    onEdit: (fixedIncome: fixedIncomeType) => void
    onDetele: (fixedIncome: fixedIncomeType) => void
    onAdd: (fixedIncome: fixedIncomeType) => void
}> = observer(({ fixedIncomes, onEdit, onAdd, accountData, onDetele }) => {
    const FixedIncomeItem: React.FC<{ item: fixedIncomeType }> = (props) => {
        const fixedIncome = props as unknown as fixedIncomeType
        return <View className="fixed-income-item flex-row flex-item">
            <View className="fixed-income-info-container flex-column">
                <View className="list-item-row font-size24 flex-row">
                    {fixedIncome.category && categorys.categoryMap ?
                        <Text className="list-item-title font-size28">
                            {categorys.categoryMap[fixedIncome.category].name}：
                        </Text> : null}
                    <Text className="list-item-title font-size28 flex1">
                        {fixedIncome.name}
                    </Text>
                    <Text className="list-item-title font-size28">{MoneyFormat(fixedIncome.amount)}</Text>
                </View>
                <View className="list-item-row font-size24 flex-row">
                    <Text>重复周期：</Text>
                    <Text>{fixedIncome.cycle && cycleMap[fixedIncome.cycle]}</Text>
                    {
                        fixedIncome.cycle === 1 ? <Text> {fixedIncome.bookDate}号</Text> :
                            fixedIncome.cycle === 2 ? <text> 星期{fixedIncome.bookDate === 7 ? '天' : fixedIncome.bookDate}</text> : null
                    }
                </View>
                <View className="list-item-row font-size24 flex-row">
                    <Text>归属成员：</Text>
                    <Text>{fixedIncome.userName}</Text>
                </View>
            </View>
            <View className="move-action flex-row">
                <View onClick={() => onEdit(fixedIncome)} className="flex1 flex-row flex-center active-btn">
                    <Text className="iconfont icon-base-edit2"></Text>
                    <Text>编辑</Text>
                </View>
                <View onClick={() => onDetele(fixedIncome)} className="flex1 flex-row flex-center active-btn">
                    <Text className="iconfont icon-base-del"></Text>
                    <Text>删除</Text>
                </View>
            </View>
        </View>
    }

    const cycleMap = useMemo(() => {
        return cycleList.reduce((obj, item) => {
            return {
                ...obj,
                [item.id]: item.name
            }
        }, {})
    }, [cycleList])

    const editItem = (fixedIncome: fixedIncomeType) => {

    }

    const deleteItem = (fixedIncome: fixedIncomeType) => {
    }

    return (
        <View className="fixed-income-list-container">
            <OperateList
                height={172}
                noDataTitle="当前账本没有固定收支"
                noDataDesc="请点击下面按钮新建"
                listData={fixedIncomes || []}
                childNode={FixedIncomeItem}>
            </OperateList>
            <View onClick={() => onAdd({
                accountId: accountData?.id,
                amount: 0,
                cycle: 1,
                name: '',
                type: 0,
                userId: user.info?.id,
                userName: user.info?.userName,
                status: 1,
                bookDate: moment().date() > 28 ? 28 : moment().date(),
                category: 1,
            })} className="add-fixed-income-btn border-main-color flex-row flex-center">
                <Text className="iconfont icon-base-add"></Text>
                <Text>新增收支</Text>
            </View>
        </View>
    )
})

export default FixedIncome